﻿<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tabs</title>
    <script type="text/javascript" src="/Utilities/webdesk/webdesk.ui.core.js"></script>
    <script type="text/javascript" src="/Utilities/webdesk/scripts/ctrls.js"></script>
    <script type="text/javascript" src="/Utilities/webdesk/scripts/tabs.js"></script>
    <link rel="stylesheet" type="text/css" href="/Utilities/webdesk/Skins/Education/tabs.css" />
    <style type="text/css">
        html,
        body {
            overflow: hidden;
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
        }
        
        h1 {
            font-size: 25px;
            color: #333;
            margin: 0px;
            font-weight: 900;
            white-space: nowrap;
            text-shadow: .2rem 0rem 1.2rem rgba(255, 255, 255, 1), -.2rem 0rem 1.2rem rgba(255, 255, 255, 1), 0rem .2rem 1.2rem rgba(255, 255, 255, 1), 0rem -.2rem 1.2rem rgba(255, 255, 255, 1);
        }
        
        h1 span {
            font-size: 15px;
            margin-left: 20px;
        }
        
        h1 b:before {
            content: "\a01d";
            font-size: 30px;
            line-height: 40px;
            margin-right: 10px;
        }
        
        a.home {
            display: block;
            width: 120px;
            height: 40px;
            line-height: 40px;
            float: right;
            font-size: 14px;
            text-align: center;
            color: #333;
            text-decoration: none;
            font-weight: normal;
        }
        
        a.home:before {
            content: "\a020";
            font-size: 18px;
            line-height: 40px;
            margin-right: 2px;
            font-family: "webdesk_icon" !important;
        }
    </style>
</head>

<body oncontextmenu='return false'>
    <div style="height: 40px; padding-left: 20px;">
        <h1><b class="webdesk_icon"></b>Tabs.js 选项卡 <span>（无限添加选项卡，支持鼠标右键，可全屏）</span><a class='home' href="/">返回首页</a></h1>
    </div>
    <div style='margin: 50px;width: calc(100% - 100px);height: calc(100% - 100px)'>
        <div id="tabs-area"></div>
    </div>
    <tabs_offset></tabs_offset>
</body>
<script type="text/javascript">
    var tabs = $tabs.create({
        target: '#tabs-area',
        width: '100%',
        height: '100%'
    });
    //切换选项卡的事件
    tabs.onchange(function(s, e) {
        //console.log('当前标签：' + e.data.title + ",tagid:" + e.tabid);
    });
    //关闭选项卡的事件
    tabs.onshut(function(s, e) {
        //console.log('当前关闭的标签：' + e.data.title + ",tagid:" + e.tabid);
    });
    //数据源
    var pages = [{
        title: '功能说明',
        url: '../other/tabs-1.html',
        path: '选项卡,功能说明'
    }, {
        title: '属性',
        ico: 'a025',
        url: '../other/tabs-2.html',
        path: '选项卡,成员介绍,属性'
    }, {
        title: '方法',
        ico: 'a023',
        url: '../other/tabs-2.html',
        path: '选项卡,成员介绍,方法'
    }, {
        title: '事件',
        ico: 'a024',
        url: '../other/tabs-2.html',
        path: '选项卡,成员介绍,事件'
    }, {
        title: '测试页',
        ico: 'e72f',
        url: '../other/tabs-child.html',
        path: '选项卡,演示'
    }];
    tabs.onadd(function(s, e) {
        console.log(e.data);
    });
    tabs.onfull(function(s, e) {
        console.log('最大化：' + e.data.title);
    })
    tabs.add(pages);
    tabs.onload(function(s, e) {
        console.log(e)
        var doc = e.iframe.contentDocument.body;
        doc.setAttribute('oncontextmenu', "javascript:return false;");
    });
    tabs.focus(1);
    //tabs.add(pages);
    console.log(tabs.childs.length);
</script>

</html>